@import "../functions";

@mixin month-picker($background-color: primary, $color: #fff) {
  .month-packer-item {
    &.this-month button {
      border: 1px solid bindColors($background-color);
    }
    &.active {
      button {
        background-color: bindColors($background-color);
        color: $color;
      }
    }
  }
}

ion-calendar-month-picker {

  .month-picker {
    margin: 20px 0;
    display: inline-block;
    width: 100%;
  }

  .month-packer-item {
    width: 25%;
    box-sizing: border-box;
    float: left;
    height: 50px;
    padding: 5px;
    button {
      border-radius: 32px;
      width: 100%;
      height: 100%;
      font-size: 1em;
      background-color: transparent;
    }
  }

  .month-picker.primary {
    @include month-picker(primary);
  }

  .month-picker.secondary {
    @include month-picker(secondary);
  }

  .month-picker.danger {
    @include month-picker(danger);
  }

  .month-picker.dark {
    @include month-picker(dark);
  }

  .month-picker.light {
    @include month-picker(light, #9e9e9e);
  }

  .month-picker.transparent {
    @include month-picker(light, #9e9e9e);
    background-color: transparent;
  }

  .month-picker.cal-color {
    @include month-picker(cal-color);
  }

}


